<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;margin-top: 10px;padding: 10px;">

            <el-button type="primary"
                       style="color: #fff;font-size: 12px;background-color: #1890ff;margin-left: -10px;margin-right: 10px"
                       @click="addItem">
                添加设备
            </el-button>
            <el-input v-model="searchClientName" placeholder="单位名称"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-input v-model="searchEquipmentId" placeholder="设备识别码"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-input v-model="searchEquipmentName" placeholder="设备名"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-input v-model="searchSimId" placeholder="SIM卡号"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <span style="min-width: 200px;margin-right: 15px">
          <OrganizationTree
                  @change="load"
                  @tree-select-changed="treeSelectChanged"
                  v-model="searchOrganizationId"
          />
        </span>
            <el-select style="width: 180px;margin-right: 15px" placeholder="设备状态" v-model="searchState" clearable>
                <el-option
                        v-for="item in statOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select style="width: 190px;margin-right: 15px" v-model="searchType" placeholder="选择设备类型" clearable>
                <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="success" style="" @click="importData">导入</el-button>
            <el-button type="success" style="" @click="exportData">导出</el-button>
        </div>
        <div class="flex gap-2">
            <el-tag style="margin-right: 5px" size="small" type="primary">设备总数：{{this.total}}</el-tag>
            <!--<el-tag style="margin-right: 5px" size="small" type="warning">分路数：2</el-tag>-->
            <!--<el-tag style="margin-right: 5px" size="small" type="success">在线分路：3</el-tag>-->
            <!--<el-tag style="margin-right: 5px" size="small" type="danger">在线设备数：4</el-tag>-->
            <!--<el-tag style="margin-right: 5px" size="small" type="info">离线设备数：5</el-tag>-->
            <!--<el-tag size="small" type="success">待处理报警分路：5</el-tag>-->
        </div>
        <div>
            <el-table ref="table" :data="tableData" :row-style="{ height: '77px' }" border highlight-current-row
                      :row-class-name="tableRowClassName"
                      style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
                <el-table-column prop="id" label="ID" width="100"/>
                <el-table-column prop="equipmentId" label="设备识别码" width="150"/>
                <el-table-column prop="equipmentName" label="设备名" width="150"/>
                <el-table-column prop="clientName" label="单位名称" width="150"/>
                <el-table-column prop="typeName" label="设备类型" width="150"/>
                <el-table-column prop="online" label="是否在线" align="center" width="90">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.online === '0'">在线</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.online === '1'">离线</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center" width="90">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.state === '0'">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.state === '1'">报警</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '2'">故障</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '3'">屏蔽</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '4'">监管</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '5'">启动</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '6'">反馈</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '7'">延时</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '8'">主电故障</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '9'">备电故障</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '10'">总线故障</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '11'">手动状态</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '12'">配置改变</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state === '13'">复位</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="安装位置" width="180"/>
                <el-table-column prop="simId" label="SIM卡号" width="180"/>
                <el-table-column prop="organizationName" label="组织" width="300"/>
                <el-table-column prop="updateTime" label="更新时间" width="180"/>
                <el-table-column prop="startTime" label="服务起日期" width="180"/>
                <el-table-column prop="endTime" label="服务止日期" width="180"/>
                <el-table-column prop="isExpire" label="是否过期" align="center" width="90">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isExpire === '0'">未过期</el-tag>
                        <el-tag  type="danger" v-else-if="scope.row.isExpire === '1'">已过期</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="服务费" width="150"/>
                <el-table-column prop="protocolType" label="协议类型" width="150"/>
                <el-table-column prop="equipmentModel" label="设备型号" width="150"/>
                <el-table-column prop="heartbeatDuration" label="心跳时长(小时)" width="150"/>
                <el-table-column prop="operatorName" label="操作员" width="150"/>
                <el-table-column prop="salePrice" label="销售价格" width="150"/>
                <el-table-column prop="manufactor" label="厂家" width="auto"/>
                <el-table-column prop="manufactorPhone" label="厂家电话" width="150"/>
                <el-table-column prop="inputTime" label="入库时间" width="180"/>
                <el-table-column prop="appkey" label="appkey" width="150"/>
                <el-table-column prop="secret" label="secret" width="150"/>
                <el-table-column prop="url" label="url" width="150"/>
                <el-table-column prop="addrMonitor" label="监控地址" width="150"/>
                <el-table-column prop="dockHost" label="消控室对接主机" width="150"/>
                <el-table-column prop="dockPlace" label="可对接场合" width="150"/>
                <el-table-column prop="dockType" label="对接方式" width="150"/>
                <!--        <el-table-column align="center" label="控制" fixed="right">-->
                <!--          <template v-slot="scope">-->
                <!--            <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>-->
                <!--            <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>-->
                <!--            <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>-->
                <!--            <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>-->
                <!--            <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>-->
                <!--            <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>-->
                <!--            <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>-->
                <!--            <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>-->
                <!--          </template>-->
                <!--        </el-table-column>-->
                <el-table-column align="center" width="200" label="操作" fixed="right">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
                        <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除
                        </el-button>
                        <el-button type="primary" size="small" icon="Edit" @click="goToAbout(scope.row)">
                            详情
                        </el-button>
                        <el-button v-if="this.userInformation.id === 1" type="primary" size="small" icon="Edit" @click="gotoData(scope.row)">
                            日志
                        </el-button>
                        <!--<el-button type="primary" v-if="scope.row.state!=='1'" size="small" icon="Edit" @click="bindingSim(scope.row)">激活</el-button>-->
                        <!--<el-button type="primary" v-if="scope.row.state==='1'" size="small" icon="Edit" @click="disconnectSim(scope.row)">离线</el-button>-->
                        <!--<el-button type="primary" v-if="scope.row.state==='2'" size="small" icon="Edit" @click="unbindingtSim(scope.row)">解绑</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog :close-on-click-modal="false" title="设备操作" v-model="operationItemDialog" :show-close="false"
                   width="690">
            <el-form label-position="left" label-width="95" :inline="true" :model="form" ref="form" :rules="rules">
                <el-form-item label="设备识别码" prop="equipmentId">
                    <el-input v-model="form.equipmentId" class="input-size" placeholder="请输入设备识别码"></el-input>
                </el-form-item>
                <el-form-item label="设备名" prop="equipmentName">
                    <el-input v-model="form.equipmentName" class="input-size" placeholder="请输入设备名"></el-input>
                </el-form-item>
                <el-form-item label="单位名称" prop="clientId">
                    <el-select style="width: 190px" v-model="form.clientId" filterable placeholder="选择单位名称">
                        <el-option
                                v-for="item in clientOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="SIM卡" prop="simId">
                    <el-input v-model="form.simId" class="input-size" placeholder="请输入SIM卡"></el-input>
                </el-form-item>
                <!--<el-form-item label="SIM卡"-->
                              <!--prop="simId">-->
                    <!--<el-dropdown trigger="click" style="width: 200px">-->
                        <!--<el-select v-model="form.simId" ref="selectRef1" placeholder="请选择SIM卡"-->
                                   <!--:visibleChange="closeSelect" :focus="closeSelect">-->
                        <!--</el-select>-->
                        <!--<template #dropdown>-->
                            <!--<el-input v-model="searchSim" placeholder="请输入SIM卡号"-->
                                      <!--style="margin: 5px;width: 200px;height: 33px;font-size: 13px;"-->
                                      <!--clearable></el-input>-->
                            <!--<el-dropdown-menu style="width: 200px">-->
                                <!--<el-dropdown-item-->
                                        <!--v-for="option in simOptions"-->
                                        <!--:value="option.id"-->
                                        <!--:label="option.simId"-->
                                        <!--@click="selectedSim(option)">-->
                                    <!--{{option.simId}}-->
                                <!--</el-dropdown-item>-->
                            <!--</el-dropdown-menu>-->
                            <!--<div style="display: flex;margin: 0 auto;max-width: 80px">-->
                                <!--<el-pagination-->
                                        <!--small-->
                                        <!--@size-change="innerHandleSizeChange"-->
                                        <!--@current-change="innerHandleCurrentChange"-->
                                        <!--:current-page="simCurrentPage"-->
                                        <!--:page-size="simPageSize"-->
                                        <!--layout="prev, pager, next, "-->
                                        <!--:total="simTotal"-->
                                <!--&gt;-->
                                <!--</el-pagination>-->
                            <!--</div>-->
                        <!--</template>-->
                    <!--</el-dropdown>-->
                <!--</el-form-item>-->
                <el-form-item label="设备类型" prop="type">
                    <el-select style="width: 190px" v-model="form.type" filterable placeholder="选择设备类型">
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务费" prop="price">
                    <el-input v-model="form.price" class="input-size" placeholder="请输入服务费"></el-input>
                </el-form-item>
                <el-form-item label="服务起日期" prop="startTime">
                    <el-date-picker
                            style="width: 190px"
                            v-model="form.startTime"
                            type="datetime"
                            placeholder="选择服务起日期"
                            value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="服务止日期" prop="endTime">
                    <el-date-picker
                            style="width: 190px"
                            v-model="form.endTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择服务止日期"
                            :shortcuts="shortcuts"
                    />
                </el-form-item>
                <el-form-item label="销售价格" prop="salePrice">
                    <el-input v-model="form.salePrice" class="input-size" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="入库时间" prop="inputTime">
                    <el-date-picker
                            style="width: 190px"
                            v-model="form.inputTime"
                            type="datetime"
                            placeholder="选择入库时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="厂家" prop="manufactor">
                    <el-input v-model="form.manufactor" class="input-size" placeholder="请输入厂家"></el-input>
                </el-form-item>
                <el-form-item label="厂家电话" prop="manufactorPhone">
                    <el-input v-model="form.manufactorPhone" class="input-size" placeholder="请输入厂家电话"></el-input>
                </el-form-item>
                <el-form-item label="组织" prop="organization">
                    <OrganizationTree
                            v-model="form.organization"
                    />
                </el-form-item>
                <el-form-item label="安装地址" prop="address">
                    <el-input v-model="form.address" class="input-size" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-form-item label="协议类型" prop="protocolType">
                    <el-input v-model="form.protocolType" class="input-size" placeholder="请输入协议类型"></el-input>
                </el-form-item>
                <el-form-item label="设备型号" prop="equipmentModel">
                    <el-input v-model="form.equipmentModel" class="input-size" placeholder="请输入设备型号"></el-input>
                </el-form-item>
                <el-form-item label="心跳时长(小时)" prop="heartbeatDuration">
                  <el-input-number :min="0" v-model="form.heartbeatDuration" placeholder="请输入心跳时长" style="width: 190px" clearable />
                </el-form-item>
                <el-form-item label="appkey" prop="appkey">
                    <el-input placeholder="请输入appkey" v-model="form.appkey" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="secret" prop="secret">
                    <el-input placeholder="请输入secret" v-model="form.secret" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="url" prop="url">
                    <el-input placeholder="请输入url" v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="监控地址" prop="addrMonitor">
                    <el-input placeholder="请输入监控地址" v-model="form.addrMonitor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="消控室主机" prop="dockHost">
                    <el-input placeholder="请输入消控室对接主机" v-model="form.dockHost" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="可对接场合" prop="dockPlace">
                    <el-input placeholder="请输入可对接场合" v-model="form.dockPlace" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="对接方式" prop="dockType">
                    <el-input placeholder="请输入对接方式" v-model="form.dockType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传对接图片" prop="dockPhoto" style="width: 100%" class="formItem">
                    <el-upload
                            :on-error="photoHandleError"
                            :action="'/api/files/upload'"
                            :on-success="dockPhotoUpload"
                            list-type="picture-card"
                            :file-list="dockPhotoList"
                    >
                        <template #tip>
                            <div class="el-upload__tip">
                                {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                            </div>
                        </template>
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                                <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file.url)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="地址名称" prop="pageTurnName">
                    <el-select
                            style="width: 190px"
                            value-key="id"
                            v-model="form.pageTurnName"
                            clearable
                            filterable
                            placeholder="请选择地址名称"
                            class="product-input"
                            @change="productSelect"
                            allow-create
                    >
                        <el-option
                                v-for="(item,index) in urlOptions"
                                :key="index"
                                :label="item.pageTurnName"
                                :value="item"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="跳转地址" prop="pageTurnUrl">
                    <el-input v-model="form.pageTurnUrl" placeholder="请输入跳转地址"/>
                </el-form-item>
            </el-form>

            <div style="text-align: center">
                <el-button style="font-size: 12px" type="primary" @click="submitForm('form')">提交</el-button>
                <el-button style="font-size: 12px" @click="reset('form')">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" v-model="this.$store.state.mapDialog" style="width: 50%;">
            <MapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></MapAddressSelect>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" v-model="operationActiveDialog" title="激活" style="width: 50%;">
            <el-form :model="form" :rules="activeRules" ref="active" label-width="120px" label-position="right"
                     class="demo-roleForm">
                <el-form-item label="选择SIM卡" prop="simId">
                    <el-dropdown trigger="click" style="width: 200px">
                        <el-select v-model="form.simId" ref="selectRef2" placeholder="请选择SIM卡"
                                   :visibleChange="closeSelect" :focus="closeSelect">
                        </el-select>
                        <template #dropdown>
                            <el-input v-model="searchSim" placeholder="请输入SIM卡号"
                                      style="margin: 5px;width: 200px;height: 33px;font-size: 13px;"
                                      clearable></el-input>
                            <el-dropdown-menu style="width: 200px">
                                <el-dropdown-item
                                        v-for="option in simOptions"
                                        :value="option.id"
                                        :label="option.simId"
                                        @click="selectedSim(option)">
                                    {{option.simId}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                            <div style="display: flex;margin: 0 auto;max-width: 80px">
                                <el-pagination
                                        small
                                        @size-change="innerHandleSizeChange"
                                        @current-change="innerHandleCurrentChange"
                                        :current-page="simCurrentPage"
                                        :page-size="simPageSize"
                                        layout="prev, pager, next, "
                                        :total="simTotal"
                                >
                                </el-pagination>
                            </div>
                        </template>
                    </el-dropdown>
                </el-form-item>
                <el-form-item>
                    <el-button style="font-size: 12px" type="primary" @click="submitForm('active')">提交</el-button>
                    <el-button style="font-size: 12px;color: #606266" @click="reset('active')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div v-if="dialogVisible" class="modal" @click="closeModal">
          <div class="modal-content" @click.stop>
            <!-- Close button -->
            <button class="close-btn" @click="closeModal">X</button>
            <img :src="dialogImageUrl" alt="" class="enlarged-image" :style="{ transform: 'scale(' + zoomLevel + ')'}" @wheel="handleZoom">
          </div>
        </div>
        <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
            <el-form label-position="right" label-width="100px">
                <el-form-item label="模板下载:" padding-top:10px>
                    <el-button type="primary" size="small" style="" @click="exportTemplate">设备列表</el-button>
                </el-form-item>
                <el-form-item label="文件" padding-top:-20px>
                    <el-upload :headers="headers"
                           :multiple="false"
                               :on-success="onUploadSuccess"
                               :on-error="onUploadError"
                               :action="serverIp+'/equipment-input-store/importData'"
                               class="upload-demo">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import {ElMessage} from "element-plus";
    import OrganizationTree from "@/components/OrganizationTree.vue";
    import MapAddressSelect from "@/components/BMapAddressSelect/MapAddressSelect.vue";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {fileSizeLimit, photoType} from "@/assets/globalJS.js";
    import Image from "@/views/homeComponents/Image.vue";
    import {Delete, Download, Iphone, Plus, Position, ZoomIn} from "@element-plus/icons-vue";
    import {serverIp} from "../../../../public/static/config"
    export default {
        components: {Breadcrumb, MapAddressSelect, OrganizationTree, Image,Delete, Download, Iphone, Plus, Position, ZoomIn},
        data() {
            return {
              zoomLevel: 1,  // Initial zoom level
                serverIp,
                headers: {
                    token:  JSON.parse(localStorage.getItem('user')).token,
                },
                userInformation:JSON.parse(localStorage.getItem("user")),
                dialogImportVisible: false,
                shortcuts: [
                    {
                        text: '一个月后',
                        value: () => {
                            const date = new Date();
                            date.setMonth(date.getMonth() + 2);
                            return date;
                        },
                    },
                    {
                        text: '半年后',
                        value: () => {
                            const date = new Date();
                            date.setMonth(date.getMonth() + 6);
                            return date;
                        },
                    },
                    {
                        text: '一年后',
                        value: () => {
                            const date = new Date();
                            date.setFullYear(date.getFullYear() + 1);
                            return date;
                        },
                    }
                ],
                operationActiveDialog: false,
                simOptions: [],
                statOptions: [
                    {
                        value: '0',
                        label: '正常'
                    }, {
                        value: '1',
                        label: '报警'
                    }, {
                        value: '2',
                        label: '故障'
                    }, {
                        value: '3',
                        label: '屏蔽'
                    }, {
                        value: '4',
                        label: '监管'
                    }, {
                        value: '5',
                        label: '启动'
                    }, {
                        value: '6',
                        label: '反馈'
                    }, {
                        value: '7',
                        label: '延时'
                    }, {
                        value: '8',
                        label: '主电故障'
                    }, {
                        value: '9',
                        label: '备电故障'
                    }, {
                        value: '10',
                        label: '总线故障'
                    }, {
                        value: '11',
                        label: '手动状态'
                    }, {
                        value: '12',
                        label: '配置改变'
                    }, {
                        value: '13',
                        label: '复位'
                    }
                ],
                searchSimId: "",
                searchClientName: "",
                typeOptions: [],
                selectOptionName: '',
                clientOptions: [],
                operationPoingMapDialog:false,
                dockPhotoList: [],
                dialogImageUrl: "",
                dialogVisible: false,
                form: {
                    systemId: 0,
                },
                rules: {
                    equipmentId: [
                        {required: true, message: '请输入设备识别码', trigger: 'blur'},
                    ],
                    equipmentName: [
                        {required: true, message: '请输入设备名', trigger: 'blur'},
                    ],
                    clientId: [
                        {required: true, message: '请选择单位名称', trigger: 'blur'},
                    ],
                    type: [
                        {required: true, message: '请选择设备类型', trigger: 'blur'},
                    ],
                    startTime: [
                        {required: true, message: '请选择服务起日期', trigger: 'blur'},
                    ],
                    endTime: [
                        {required: true, message: '请选择服务止日期', trigger: 'blur'},
                    ],
                    // price: [
                    //   {required: true, message: '请输入服务费', trigger: 'blur'},
                    // ],
                    // manufactor: [
                    //   {required: true, message: '请输入厂家', trigger: 'blur'},
                    // ],
                    // manufactorPhone: [
                    //   {required: true, message: '请输入厂家电话', trigger: 'blur'},
                    // ],
                    // inputTime: [
                    //   {required: true, message: '请选择入库时间', trigger: 'blur'},
                    // ],
                    organization: [
                        {required: true, message: '请选择组织', trigger: 'blur'},
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                    ],
                    // protocolType:[
                    //   {required: true, message: '请输入协议类型', trigger: 'blur'},
                    // ],
                    // equipmentModel:[
                    //   {required: true, message: '请输入设备型号', trigger: 'blur'},
                    // ],
                    heartbeatDuration: [
                        {required: true, message: '请输入心跳时长', trigger: 'blur'},
                        {type: 'number', message: '心跳时长必须为数字', trigger: 'blur'}
                    ],
                    // pageTurnUrl: [
                    //     {required: true, message: '请输入跳转地址', trigger: 'blur'},
                    // ],
                    // pageTurnName: [
                    //     {required: true, message: '请选择跳转地址名称', trigger: 'blur'},
                    // ],
                },
                // activeRules:{
                //   simId: [
                //     {required: true, message: '请选择SIM卡', trigger: 'blur'},
                //   ],
                // },
                currentData: {},
                searchSim: "",
                searchState: "",
                searchEquipmentId: "",
                searchEquipmentName: "",
                searchType: "",
                searchOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
                simCurrentPage: 1,
                simPageSize: 10,
                operationItemDialog: false,
                search: "",
                tableData: [],
                urlOptions: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                simTotal: 0,
                isEdit: false,
            }
        },
        created() {
            this.load()
            this.getTypeOptions()
            this.getUrlOption()
            this.getClientOptions()
        },
        methods: {
            tableRowClassName({row}) {
                if (row.isExpire === '1') {
                    // 后面的css样式
                    return 'warning-row';
                } else if (row.isExpire === '0') {
                    return '';
                }
                return '';
            },
            importData() {
                this.dialogImportVisible = true;
            },
            onUploadSuccess() {
                this.$message.success('上传成功');
                this.dialogImportVisible = false;
                location.reload();
            },
            onUploadError(){
                this.$message.error('上传失败');
            },
            // 模板下载
            exportTemplate() {
                window.location.href = '../../xlsx/deviceList.xlsx'
            },
            exportData() {
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                if (this.searchState === undefined) {
                    this.searchState = ""
                }
                if (this.searchType === undefined) {
                    this.searchType = ""
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                window.open(serverIp + '/equipment-input-store/export?equipmentName=' + this.searchEquipmentName +
                "&equipmentId=" + this.searchEquipmentId + "&level=" + level + "&organizationId=" + this.searchOrganizationId + "&state=" + this.searchState + "&type=" + this.searchType + "&systemId=" + 0 + "&SIMId=" + this.searchSimId + "&clientName=" + this.searchClientName + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds);
            },
            getClientOptions() {
                let level = JSON.parse(localStorage.getItem("user")).level
                let organizationId = JSON.parse(localStorage.getItem("user")).organization
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/client/listbyName?name=" + this.selectOptionName + "&organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    this.clientOptions = res.data
                })
            },
            goToAbout(scope) {
                if (scope.type === 52) {
                    this.$router.push({path: "/deviceSysData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 51) {
                    this.$router.push({path: "/fireCockSysData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 42) {
                    this.$router.push({path: "/currentDqData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 53) {
                    this.$router.push({path: "/currentJhData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 44) {
                    this.$router.push({path: "/currentLsData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 45) {
                    this.$router.push({path: "/currentQgData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                } else if (scope.type === 43) {
                    this.$router.push({path: "/currentYgData", query: {equipmentInputStoreId: scope.id, equipmentId: scope.equipmentId}});
                }
            },
            gotoData(scope) {
                if (scope.type === 52) {
                    this.$router.push({path: "/deviceSysLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 51) {
                    this.$router.push({path: "/fireCockSysLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 42) {
                    this.$router.push({path: "/currentDqLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 53) {
                    this.$router.push({path: "/currentJhLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 44) {
                    this.$router.push({path: "/currentLsLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 45) {
                    this.$router.push({path: "/currentQgLog", query: {equipmentInputStoreId: scope.id}});
                } else if (scope.type === 43) {
                    this.$router.push({path: "/currentYgLog", query: {equipmentInputStoreId: scope.id}});
                }
            },
            // 获取要绑定的SIM列表
            getSimOptions() {
                let level = JSON.parse(localStorage.getItem("user")).level
                let organizationId = JSON.parse(localStorage.getItem("user")).organization
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/sim-input-store/all?pageNum=" + this.simCurrentPage + "&pageSize=" + this.simPageSize + "&SIMId=" + this.searchSim + "&organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    for (let key in res.data) {
                        if (key === "record") {
                            this.simOptions = res.data[key];
                        } else if (key === "total") {
                            this.simTotal = res.data[key];
                        }
                    }
                })
            },
            load() {
                try {
                    let level = JSON.parse(localStorage.getItem("user")).level
                    if (this.currentData.level !== undefined) {
                        level = this.currentData.level
                    }
                    if (this.searchState === undefined) {
                        this.searchState = ""
                    }
                    if (this.searchType === undefined) {
                        this.searchType = ""
                    }
                    let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                    let clientIds;
                    if (isAllClient === "1") {
                        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                    } else {
                        clientIds = [];
                    }
                    let id = ""
                    if (this.$route.query.id){
                      id = this.$route.query.id
                    }
                    request.get("/equipment-input-store/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&equipmentName=" + this.searchEquipmentName +
                        "&equipmentId=" + this.searchEquipmentId + "&level=" + level + "&organizationId=" + this.searchOrganizationId + "&state=" + this.searchState + "&type=" +
                        this.searchType + "&systemId=" + 0 + "&SIMId=" + this.searchSimId + "&clientName=" + this.searchClientName + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&id=" + id).then(res => {
                        if (res.code === '200') {
                            for (let key in res.data) {
                                if (key === "record") {
                                    this.tableData = res.data[key];
                                  if (this.$route.query.id){
                                    this.$nextTick(()=>{
                                      this.$refs.table.setCurrentRow(this.tableData[0])
                                    })
                                  }
                                } else if (key === "total") {
                                    this.total = res.data[key];
                                }
                            }
                        } else {
                            ElMessage.error("错误" + res.msg)
                        }
                    })
                } catch (e) {
                    ElMessage.error(e)
                }
            },
            // 编辑设备
            editItem(item) {
                this.isEdit = true;
                // this.getSimOptions()
                Object.assign(this.form, item)
                this.initdockPhotoList()
                this.operationItemDialog = true
            },
            addItem() {
                // this.getSimOptions()
                this.operationItemDialog = true;
            },
            // 删除
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/equipment-input-store/delete/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            // 提交
            submitForm(val) {
                this.$refs[val].validate((valid) => {
                    if (valid) {
                        if (val === 'active') {
                            this.form.state = '1'
                        }
                        if (this.form.state !== '0') {
                            // if (this.form.simInputStoreId===''||this.form.simInputStoreId===null||this.form.simInputStoreId===undefined){
                            //   this.$message.error("请绑定SIM卡")
                            //   return
                            // }
                        }
                        this.form.systemId = 0;
                        this.form.operatorId = JSON.parse(localStorage.getItem("user")).id
                        request.post("/equipment-input-store/edit", this.form).then(res => {
                            if (res.code === '200') {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                })
                                this.load()
                                this.reset(val)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
            },
            closeSelect() {
                this.$refs["selectRef"].blur();
            },
            getTypeOptions() {
                request.get("/equipment-type/all?systemId=" + 0).then(res => {
                    this.typeOptions = res.data
                })
            },
            /** 确认地图地址 */
            confirmMapAddress(addressInfo) {
                if (addressInfo.province !== undefined) {
                    this.form.address = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.address
                    this.form.latitude = addressInfo.latitude
                    this.form.longitude = addressInfo.longitude
                }
            },
            treeSelectChanged(data, node) {
                this.currentData = data
            },
            // 选择绑定SIM
            selectedSim(option) {
                this.form.simInputStoreId = option.id
                this.form.simId = option.simId
            },
            // 取消
            reset(val) {
                this.isEdit = false;
                this.operationActiveDialog = false;
                this.operationItemDialog = false;
                this.form = {};
                this.dockPhotoList = [];
                this.$refs[val].resetFields();
            },
            productSelect(e) {
                if (e.pageTurnName) {
                    this.form.pageTurnName = e.pageTurnName
                }
                if (e.pageTurnUrl) {
                    this.form.pageTurnUrl = e.pageTurnUrl
                }
            },
            // 绑定
            bindingSim(option) {
                this.getSimOptions()
                Object.assign(this.form, option)
                this.operationActiveDialog = true;
            },
            disconnectSim(option) {
                Object.assign(this.form, option)
                this.form.state = "2"
                request.post("/equipment-input-store/updateState", this.form).then(res => {
                    if (res.code === '200') {
                        this.$message.success("成功")
                        this.load()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            unbindingtSim(option) {
                Object.assign(this.form, option)
                this.form.simInputStoreId = ""
                this.form.state = "0"
                this.form.deviceBindingSim = 0
                request.post("/equipment-input-store/updateState", this.form).then(res => {
                    if (res.code === '200') {
                        this.$message.success("成功")
                        this.load()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            getUrlOption() {
                try {
                    request.get("/equipment-input-store/findAllUrlName").then(res => {
                        if (res.code === '200') {
                            this.urlOptions = res.data
                        }
                    })
                } catch (e) {
                    ElMessage.error(e)
                }
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
            innerHandleCurrentChange(item) {
                // 改变当前页码触发
                this.simCurrentPage = item
                this.getSimOptions()
            },
            innerHandleSizeChange(item) {   // 改变当前每页的个数触发
                this.simPageSize = item
                this.getSimOptions()
            },
            photoType() {
                return photoType
            },
            fileSizeLimit() {
                return fileSizeLimit
            },
            handlePictureCardPreview(url) {
                this.dialogImageUrl = url;
                this.dialogVisible = true;
            },
            handleRemove(file) {
                const index = this.dockPhotoList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.dockPhoto.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.dockPhoto = images.join(','); // 更新 pointMap 字符串
                    this.dockPhotoList.splice(index, 1);
                }
            },
          handleZoom(event) {
            event.preventDefault(); // 防止页面滚动

            // 根据滚轮方向调整缩放级别
            if (event.deltaY < 0) {
              this.zoomLevel = Math.min(this.zoomLevel + 0.1, 3); // 最大缩放到3倍
            } else {
              this.zoomLevel = Math.max(this.zoomLevel - 0.1, 1); // 最小缩放到1倍
            }
          },
            closeModal() {
              this.dialogImageUrl = ''
              this.dialogVisible = false
              this.zoomLevel = 1; // 重置缩放级别
            },
            photoHandleError() {
                this.$message.error("上传文件大小请勿超过" + fileSizeLimit)
            },
            dockPhotoUpload(response) {
                // this.pointMapList = this.form.pointMap.split(',');

                if (this.dockPhotoList.length === 0) {
                    this.form.dockPhoto = `/api/file/download${response}`
                } else {
                    this.form.dockPhoto = this.form.dockPhoto + `,/api/file/download${response}`
                }
                this.initdockPhotoList()
                console.log(this.dockPhotoList)
                console.log(this.form.dockPhoto)
            },
            initdockPhotoList() {
                this.dockPhotoList = this.form.dockPhoto ? this.form.dockPhoto.split(',').map(url => {
                    return {url}
                }) : [];
            },
        },
        watch: {
            searchSim() {
                this.getSimOptions()
            },
            searchState() {
                this.load()
            },
            searchEquipmentName() {
                this.load()
            },
            searchType() {
                this.load()
            },
            searchEquipmentId() {
                this.load()
            },
            searchOrganizationId() {
                this.load()
            },
            searchSimId() {
                this.load()
            },
            searchClientName() {
                this.load()
            }
        },
    }

</script>

<style scoped>
    :deep(.el-table .warning-row) {
        color: black;
        background-color: rgba(241, 126, 85, 0.5) !important;
    }

    :deep(.el-form-item__label) {
        font-size: 15px;
        font-weight: 700
    }

    :deep(.el-table th .cell) {
        font-weight: 700
    }

    :deep(.el-select-dropdown__item) {
        font-size: 14px;
    }

    :deep(.el-select__wrapper) {
        font-size: 14px;
    }
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; /* 使用视口宽度 */
      height: 100vh; /* 使用视口高度 */
      background-color: rgba(0, 0, 0, 0.9); /* 更深的半透明背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9000; /* 确保弹窗在最上层 */
    }

    .modal-content {
      position: relative; /* 相对定位，用于定位关闭按钮 */
      width: 100%; /* 弹窗内容宽度为100% */
      height: 100%; /* 弹窗内容高度为100% */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .close-btn {
      z-index: 9999;
      position: absolute;
      top: 20px; /* 离顶部距离 */
      right: 20px; /* 离右侧距离 */
      background-color: transparent; /* 背景透明 */
      border: none;
      font-size: 24px; /* 字体大小 */
      cursor: pointer;
      color: red; /* 关闭按钮颜色 */
    }

    .close-btn:hover {
      color: red; /* 鼠标悬停时颜色变化 */
    }

    .enlarged-image {
      max-width: 100%; /* 确保图片不会超出弹窗边界 */
      max-height: 100%; /* 确保图片不会超出弹窗边界 */
      border-radius: 0; /* 去掉图片的圆角 */
      transition: transform 0.3s ease; /* 变换过渡效果 */
    }


</style>
